<template>
	<view>
		<!-- 顶部面板背景 -->
		<view class="top"></view>

		<!-- 订单信息卡片 -->
		<uni-card style="position: relative; top: -320rpx; border-radius: 30rpx;">
			<view style="display: flex;justify-content: space-between; margin-bottom: 13rpx;">
				<view style="font-size: 28rpx;color: black;">负责人</view>
				<view style="font-size: 27rpx;color: black;">{{shop.perName}}</view>
			</view>
			<view style="display: flex;justify-content: space-between; margin-bottom: 13rpx;">
				<view style="font-size: 28rpx;color: black;">身份证号码</view>
				<view style="font-size: 27rpx;color: black;">{{shop.perIdcard}}</view>
			</view>
			<view style="display: flex;justify-content: space-between; margin-bottom: 13rpx;">
				<view style="font-size: 28rpx;color: black;">手机号</view>
				<view style="font-size: 27rpx;color: black;">{{shop.perPhone}}</view>
			</view>
			<view style="display: flex;justify-content: space-between; margin-bottom: 13rpx;">
				<view style="font-size: 28rpx;color: black;">店名</view>
				<view style="font-size: 27rpx;color: black;">{{shop.storeName}}</view>
			</view>
			<view style="display: flex;justify-content: space-between; margin-bottom: 13rpx;">
				<view style="font-size: 28rpx;color: black;">工商营业执照号码</view>
				<view style="font-size: 27rpx;color: black;">{{shop.shopNumber}}</view>
			</view>
			<view style="display: flex;justify-content: space-between; margin-bottom: 13rpx;">
				<view style="font-size: 28rpx;color: black;">经营地区</view>
				<view style="font-size: 27rpx;color: black;">{{shop.shopArea}}</view>
			</view>
			<view style="display: flex;justify-content: space-between; margin-bottom: 13rpx;">
				<view style="font-size: 28rpx;color: black;">地址</view>
				<view style="font-size: 27rpx;color: black;">{{shop.shopAddress}}32号
				</view>
			</view>

		</uni-card>

		<!-- 订单详情卡片 -->
		<uni-card style="position: relative; top: -320rpx; border-radius: 30rpx;">
			<view class="card-header">
				<span>商家简介</span>
			</view>

			<view class="comment">
				{{shop.shopIntro}}
			</view>


		</uni-card>

		<!-- 评价结果卡片 -->
		<uni-card style="position: relative; top: -320rpx; border-radius: 30rpx;">
			<view class="card-header">
				<span>身份证正反面照片</span>
			</view>
			<image src="/static/idcard1.png" style="width: 300rpx; height: 210rpx;"></image>
			<image src="/static/idcard2.png" style="width: 300rpx; height: 210rpx;"></image>
		</uni-card>




		<uni-card style="position: relative; top: -320rpx; border-radius: 30rpx;">
			<view class="card-header">
				<span>营业执照</span>

			</view>
			<image src="/static/R-C.jpg" style="width: 520rpx;height: 410rpx;"></image>

		</uni-card>

		<uni-card style="position: relative; top: -320rpx; border-radius: 30rpx;">
			<view class="card-header">
				<span>门店照片</span>

			</view>
			<image src="/static/OIP-C (2).jpg" style="width: 520rpx;height: 410rpx;"></image>

		</uni-card>

		<u-button @click="toEdit" type="primary" text="修改"
			style="width: 330rpx; position: relative; top: -250rpx; border-radius: 30px;"></u-button>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				rate: 3,
				shopId: '',
				shop: {}
			};
		},
		onLoad() {
			this.shopId = uni.getStorageSync("shopId");
			this.getInfo()
		},
		methods: {
			getInfo() {
				let that = this
				this.$http({
					url: '/api/shop/shop/' + that.shopId,
					method: 'Get',
					success(res) {
						that.shop = res.data.data;
						console.log(that.shop)
					}
				})
			},
			todetail() {
				uni.navigateTo({
					url: '#'
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	/* 顶部背景样式 */
	.top {
		padding-right: 20rpx;
		padding-left: 20rpx;
		height: 280rpx;
		background-color: #2f81fa;
		padding-top: 60rpx;
	}

	/* 卡片头部样式 */
	.card-header {
		margin: 30rpx 5rpx;
		padding-bottom: 14rpx;
		border-bottom: 12rpx solid #f7f7f7;
		display: flex;
		justify-content: space-between;

		span {
			font-size: 36rpx;
			color: black;
			font-weight: 500;
		}

		.status {
			color: #ff3c00;
		}
	}

	/* 订单信息样式 */
	.order-info {
		margin: 20rpx 0;

		.info-row {
			display: flex;
			justify-content: flex-start;
			margin-bottom: 12rpx;
			font-size: 32rpx;
			color: black;

			.label {
				width: 220rpx;
				/* 固定宽度 */
				font-weight: 500;
			}

			.value {
				flex: 1;
				font-weight: 300;
			}
		}
	}

	/* 订单详情样式 */
	.detail-row {
		display: flex;
		justify-content: space-between;
		color: black;
		margin-bottom: 20rpx;
	}

	.detail-section {
		margin: 30rpx 5rpx;
		padding-bottom: 14rpx;
		border-bottom: 6rpx solid #f7f7f7;
		margin-bottom: 20rpx;
	}

	.discount {
		color: #ff3c00;
	}

	.total-amount {
		font-size: 42rpx;
		font-weight: 600;
	}

	/* 评价结果样式 */
	.comment {
		font-size: 26rpx;
		font-weight: 200;
		color: black;
		margin-top: 10rpx;
	}
</style>